﻿<html>
  <head>
    <meta name="source" content="http://www.terrainformatica.com/wiki/doku.php?id=h-smile:built-in-behaviors:edit"/>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <h1>behavior: htmlarea</h1>
  <p>HTML WYSIWYG(所见即所得) 行为。</p>
  <p>该行为支持类似于&lt;frame&gt;/behavior:frame的文档容器模式 - 它支持加载完整的&lt;html&gt;...&lt;/html&gt;文档到它的内部。</p>
  <h2>元素</h2>
  <p>默认情况下，应用了该行为的元素有:</p>
  <ul>
    <li><code>&lt;htmlarea&gt;...&lt;/htmlarea&gt;</code> 编辑器;</li></ul>
  <h2>属性</h2>
  <p>该行为需要知道的属性:</p>
  <ul>
    <li><code>readonly</code> - bool, 声明改元素是只读的;</li>
		<li><code>content-style</code> - string, 一个应用到编辑器内容的.css文件的URL。 在你需要为编辑内容设置特有样式时可以使用该属性。</li></ul>
  <h2>模型</h2>
  <p>富文本支持两种内容模型。HTML片段: </p>
  <pre>&lt;htmlarea&gt;
   &lt;h2&gt;Some HTML content&lt;/h2&gt;
   &lt;p&gt;Line 2&lt;/p&gt;
   &lt;p&gt;Line 3&lt;/p&gt;
&lt;/htmlarea&gt;
</pre>
	<p>以及全文档。在这种场景中，<code>&lt;htmlarea&gt;</code>的行为类似与一个包含了文档的<code>&lt;frame&gt;</code>:</p>
	<pre>&lt;htmlarea&gt;
   &lt;html&gt;
      &lt;body&gt;
        &lt;h2&gt;Some HTML content&lt;/h2&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
        &lt;p&gt;Line 3&lt;/p&gt;
      &lt;/body&gt;
   &lt;/html&gt;
&lt;/htmlarea&gt;</pre> <p>内容模型取决于加载到编辑器中的文档类型。</p>
<h2>事件</h2>
  <p>除了标准的事件集(mouse, keyboard, focus)外， <em>behavior: htmlarea</em>还生成:</p>
  <ul>
    <li>EDIT_VALUE_CHANGED 事件 - 由于用户的操作导致元素的值被改变事件。异步事件。</li>
    <li>EDIT_VALUE_CHANGING 事件 - 当元素的值将要改变之前被触发。同步事件。</li></ul>
  <h2>值</h2>
  <p>string, 反应DOM内容的当前状态- value可以获取/设置当前HTML的内容; 对于富文本DOM元素，<i>value</i>属性是<i>html</i>属性的别名。</p>
  <h2>特有的快捷键组合</h2>
  <ul>
    <li>LEFT, CTRL+LEFT, SHIFT+LEFT, CTRL+SHIFT+LEFT</li>
    <li>RIGHT, CTRL+RIGHT, SHIFT+RIGHT, CTRL+SHIFT+RIGHT</li>
    <li>HOME, SHIFT+HOME</li>
    <li>END, SHIFT+END</li>
    <li>BACKSPACE, ALT+BACKSPACE, CTRL+BACKSPACE</li>
    <li>CTRL+A</li>
    <li>DELETE, SHIFT+DELETE, CTRL+DELETE</li>
    <li>INSERT, SHIFT+INSERT, CTRL+INSERT</li>
    <li>CTRL+X</li>
    <li>CTRL+V</li>
    <li>CTRL+Z</li>
    <li>CTRL+(LEFT)SHIFT 和 CTRL+(RIGHT)SHIFT - 这两个快捷键在形式上相当于在<code>dir</code>属性上切换<code>dir=&quot;ltr&quot;</code>和<code>dir=&quot;rtl&quot;</code>。</li></ul>
		<p>格式化命令:</p>
		<li><code>CTRL+D</code> - 封装当前文本块到<code>&lt;code&gt;text&lt;/code&gt;</code>;</li>
    <li><code>CTRL+NUMPAD1...6</code> - 封装当前文本块到<code>&lt;h1&gt;</code>...<code>&lt;h6&gt;</code>;</li>
		<li><code>CTRL+NUMPAD7</code>&nbsp;- 封装当前文本或块到<code>&lt;pre&gt;</code>;</li>
		<li><code>CTRL+NUMPAD0 </code>- 封装当前文本或块到<code>&lt;p&gt;</code>;</li>
		<li><code>CTRL+NUMPAD+</code> - 缩进当前选择内容;</li>
		<li><code>CTRL+NUMPAD-</code> - 反缩进当前选择内容;</li>
		<li><code>CTRL+NUMPAD.</code> - 转换当前选择内容到顺序列表&nbsp;<code>&lt;ol&gt;</code><code>/&lt;li&gt;</code>;</li>
		<li><code>CTRL+NUMPAD*</code> - 转换当前选择内容到无序列表&nbsp;<code>&lt;ul&gt;</code><code>/&lt;li&gt;</code>;</li>
		<li><code>CTRL+NUMPAD/</code> - 转换当前选择内容到无限列表&nbsp;<code>&lt;dl&gt;</code><code>/&lt;dt&gt;/&lt;dd&gt;</code>;</li>
		</ul>
	<h2>命令</h2>
	<p><code>htmlarea.execCommand(command,attributes)</code>麻烦执行科撤销的编辑命令。<em>command</em>参数指示要执行的命令。</p>
  <p>编辑命令对所有可编辑元素都是通用的( &lt;input|text&gt;, &lt;textarea&gt;, &lt;plaintext&gt;, &lt;htmlarea&gt; ):</p>
  <ul>
    <li><code>&quot;edit:cut&quot;</code> - 剪切选择内容 - 复制选择内容到剪切板并移除它;</li>
    <li><code>&quot;edit:copy&quot;</code> - 复制选择内容到剪切板;</li>
    <li><code>&quot;edit:paste&quot;</code> - 粘贴剪切板中的内容;</li>
    <li><code>&quot;edit:selectall&quot;</code> - 选择当前元素的所有内容;</li>
    <li><code>&quot;edit:undo&quot;</code> - 撤销最近一次编辑操作;</li>
    <li><code>&quot;edit:redo&quot;</code> - 重做最近一次撤销的操作;</li>
    <li><code>&quot;edit:delete-next&quot;</code> - 如果有选择内容，则删除选择内容, 否则删除下一个字符;</li>
    <li><code>&quot;edit:delete-prev&quot;</code> - 如果有选择内容，则删除选择内容, 否则删除上一个字符;</li>
    <li><code>&quot;edit:delete-word-next&quot;</code> - 如果有选择内容，则删除选择内容, 否则删除下一个单词;</li>
    <li><code>&quot;edit:delete-word-prev&quot;</code> - 如果有选择内容，则删除选择内容, 否则删除上一个单词;</li>
  </ul>
  <p><code>behavior:richtext</code> ( <code>&lt;htmlarea&gt;</code> )特有的命令:</p>
  <ul>
    <li><code>&quot;edit:insert-break&quot;</code> - 本质上它是一个&quot;ENTER&quot; (VK_RETURN) 命令, 具体的DOM操作取决于上下文;</li>
    <li><code>&quot;edit:insert-soft-break&quot;</code> - &quot;SHIFT+ENTER&quot;命令, 插入一个<code>&lt;br&gt;</code>分隔符，并且具体的DOM操作取决于上下文;</li>
    <li><code>&quot;format:apply-span:{tag-list}&quot;</code> - 包装选择内容到一个span元素中, 如果选择内容包含以下标签，则它们将被移除：
    <ul>
        <li><code>{tag-list}</code>时一个以管道符(<code>|</code>)分隔的标签名列表。比如:<br/>
            <code>execCommand(&quot;format:apply-span:b|strong&quot;)</code> - 将包装选择内容到<code>&lt;b&gt;...&lt;/b&gt;</code>，并且从选择内容中移除所有的<code>&lt;b&gt;</code>和<code>&lt;strong&gt;</code>元素。</li>
        <li>另外可以添加一个参数用来包含添加到包装元素上的属性映射表, 比如:<br/>
            <code>execCommand(&quot;format:apply-span:font&quot;,{color:&quot;#F00&quot;})</code> - 将包装选择内容到<code>&lt;font color=&quot;#F00&quot;&gt;...&lt;/font&gt;</code>元素上。</li>
      </ul>
    </li>
    <li><code>&quot;format:toggle-span:{tag-list}&quot;</code> - 如果选择内容包含tag-list中的标签则移除它, 否则它相当于做了<code>&quot;format:apply-span:...&quot;</code>命令。</li>
    <li><code>&quot;format:toggle-list:{list-tag}&quot;</code> - 转换选择内容中的段落到一个列表中。如果选择内容已经是一个指定的列表类型，则列表中的项将转换成一个简单的段落。
        <ul>
          <li><code>{list-tag}</code>可以是<code>ul</code>, <code>ol</code> 或 <code>dl</code>。</li>
        </ul>
    </li>
    <li><code>&quot;format:toggle-pre&quot;</code> - 转换选择内容到<code>&lt;pre&gt;</code>块中，或移除<code>&lt;pre&gt;</code>。</li>
    <li><code>&quot;format:indent&quot;</code> - 保存选择的段落到<code>&lt;blockquote&gt;</code> 或 sub-list。</li>
    <li><code>&quot;format:unindent&quot;</code> - 将选择内容从<code>&lt;blockquote&gt;</code>中卸载，或移动子列表到上一层级。</li>
    <li><code>&quot;format:morph-block:{tag}&quot;</code> - 改变选择块内容的标签。比如可以通过它将当前的<code>&lt;blockquote&gt;</code>标签改成<code>&lt;div&gt;</code>。仅块元素(且不包含其他<code>display:block</code>元素)可以被morphed。</li>
    <li><code>&quot;format:unwrap-element:{tag}&quot;</code> - 将元素的内容移到它的父元素中，并且从DOM中移除该元素。</li>
  </ul>
	<p>表格编辑操作。下面这些操作仅在选择内容在一个表格中时才有效:</p>
	<ul>
    <li><code>edit:insert-table-row:{before|after}</code> - 在选择单元格后面一行之前插入一行;</li>
		<li><code>edit:insert-table-column:{before|after}</code> - 在选择单元格后面一列之前插入一列;</li>
		<li><code>edit:merge-table-cells</code> - 将选择的单元格范围合并成一个单元格(将为单元格添加rowspan/colspan);</li>
		<li><code>edit:delete-table-rows</code> - 删除选择的行;</li>
		<li><code>edit:delete-table-columns</code> - 删除选择的列;</li>
		<li><code>edit:split-table-cells</code> - 拆分已合并的单元格。</li>
  </ul>
  <h2>方法</h2>
  <dl>
    <dt><code>loadDocument</code></dt>
    <dd><code>(url:string): true|false</code> 
      <p>从URL加载文件到编辑器中;</p></dd>
    <dt><code>saveDocument</code></dt>
    <dd><code>(url:string): true|false</code> 
      <p>保存content到文件中;</p></dd>
    <dt><code>emptyDocument</code></dt>
    <dd><code>(text:string):&nbsp;true|false</code>
      <p>初始化编辑器为一个空文档;</p></dd>
    <dt><code>sourceToContent</code></dt>
    <dd><code>(html:string, url:string, selStart:integer, selEnd:integer):&nbsp;true|false</code>
      <p>将<i>text</i>字符串设置到content中，并且根据<i>selStart</i>和<i>selEnd</i>设置选择范围;</p>
       <p>这个方法将<i>html</i>字符串设置到content中，并且根据<i>selStart</i>和<i>selEnd</i>设置选择内容。</p>
			<p>这个方法增量更新内容 - 该方法用于从可选的撤销/重做栈中从使用HTML源代码更新时使用;</p></dd>
    <dt><code>contentToSource</code></dt>
    <dd>
      <code>() : [html:string, selStart:integer, selEnd:integer] </code>
      <p>返回一个有3个元素的数组，包括content和选择范围;</p>
    </dd>
  </dl>
</body>
</html>